<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="../node_modules/d3/dist/d3.js"></script>
<script src="../node_modules/viz.js/viz.js" type="javascript/worker"></script>
<script src="../build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

var engineIndex = 0;
var engine;

var graphviz = d3.select("#graph").graphviz()
    .transition(function () {
        return d3.transition("main")
            .ease(d3.easeLinear)
            .delay(2000)
            .duration(2000);
    })
    .on("initEnd", render);

function render() {
    engine = engines[engineIndex];
    dot = generateDot();
    graphviz
        .engine(engine)
        .renderDot(dot)
        .on("end", function () {
            engineIndex = (engineIndex + 1) % engines.length;
            render();
        });
}

const engines = ["circo", "dot", "fdp", "neato", "osage", "patchwork", "twopi"];

function generateDot() {
    return `
digraph  {
    graph [label=${engine} labelloc=t]
    node [style=filled]
    a [fillcolor="#d62728"]
    b [fillcolor="#1f77b4"]
    c [fillcolor="#2ca02c"]
    d [fillcolor="#ff7f0e"]
    a -> b
    a -> c
    a -> d
}
    `;
}

</script>
